{% extends 'index.html' %}
{% block content %}
    <div class="content">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-header">
                       <h4>车辆实时监控系统</h4>
                    </div>
                    <div class="card-body">
                        <div class="row">
                            <div class="col-7">
                                <div id="mapdiv" style="height: 700px; width: 100%"></div>
                            </div>
                            <div class="col-5">
                                <div id="truck_list">
                                    <table id="truck_table" class="table table-striped table-bordered">
                                        <thead>
                                            <tr>
                                                <th>编号</th>
                                                <th>任务</th>
                                                <th>经度</th>
                                                <th>纬度</th>
                                                <th>状态</th>
                                            </tr>
                                        </thead>
                                        <tbody id="truck_data">

                                        </tbody>
                                        <tfoot>
                                        </tfoot>

                                    </table>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block css_js_2 %}
    <link rel="stylesheet" href="/static/assets/css/lib/datatable/dataTables.bootstrap4.min.css">
    <script src="/static/assets/js/popper.min.js"></script>
    <script src="/static/assets/js/bootstrap.min.js"></script>
    <script src="/static/assets/js/jquery.matchHeight.min.js"></script>
    <script src="/static/assets/js/main.js"></script>
    <script type="text/javascript" src="/static/assets/js/echarts.js"></script>
    <script type="text/javascript" src="/static/assets/js/bmap.js"></script>
    <script type="text/javascript" src="http://api.map.baidu.com/getscript?v=2.0&ak=PxtslWs33vGT2MENQt785OgpD9tCqjwn"></script>
    <script src="/static/assets/js/lib/data-table/datatables1.10.18.min.js"></script>
    <script src="/static/assets/js/lib/data-table/dataTables.bootstrap4.min.js"></script>

    <script type="text/javascript">
        var option = {
            title: {
                  text: '',
                      left: 'center',
                  textStyle: {
                      color: '#000000',
                      fontSize: 48,
                      fontFamily: 'Microsoft YaHei'
                  }
            },legend: {
                left:'right',
                data: ['仓库', '车辆']
            },
            bmap: {
                center: [116.404, 39.915],
                zoom: 12,
                roam: true,
            },
            series:[{
                name: "车辆",
                type: 'effectScatter',
                coordinateSystem: 'bmap',
                data:[],
                symbolSize:10,
                showEffectOn: "render",
                rippleEffect: {
                    brushType: 'stroke'
                },
                hoverAnimation: true,
                tooltip:{
                    formatter:function(params) {
                       var res = "("+params.data[0].toFixed(2)+","+params.data[1].toFixed(2) + ")<br/>"+
                            "车辆编号:" + params.data[2] + "<br/>司机:" + params.data[3]
                            +"<br/>执行任务:"+ params.data[4] + "<br/>设备状态:" +params.data[5];
                        return res;
                    }
                }
            },{
                name: "仓库",
                type:"scatter",
                coordinateSystem: 'bmap',
                data: {{ warehouse_list | safe}},
                symbolSize:20,
                tooltip : {
                    trigger: 'item',
                    formatter : function(params) {
                        var res = '仓库编号: ' + params.data[3] +'<br/>地址: ' + params.data[2] + '<br/>'
                                + '货架数:' + params.data[4]
                        return res;
                    }
                }
            }],
            tooltip : {
                trigger: 'item',
                formatter : function(params) {
                    return res;
                }
            }
        };
        var map_chart = echarts.init(document.getElementById('mapdiv'));
        map_chart.setOption(option)
        map_chart.on('click', function(params){
    //        console.log(params)
            if (params.componentIndex == 1){
            	window.location.href="{% url 'warehouse' %}";}
            else if (params.componentIndex == 0){
            	window.location.href="{% url 'exception_handle_info' %}"
            }
        })
        var map = map_chart.getModel().getComponent('bmap').getBMap();
        var point = new BMap.Point(116.404, 39.915);
        map.setMapStyle({style:"light"});


    //重新加载数据
        function map_update(get_data){
            option = map_chart.getOption();
            option.series[0].data = get_data;
            map_chart.hideLoading();
            map_chart.setOption(option);
            };

        function list_update(get_data){
            var parent = document.getElementById("truck_data");
            var insert = "";
    //        console.log(typeof(get_data))
            for (var i in get_data) {
                if (get_data[i][5] == "异常"){
                    insert += "<tr style=\"color:red\">"+
                            "<td>"+get_data[i][2]+"</td>"+
                            "<td>"+get_data[i][4]+"</td>"+
                            "<td>"+get_data[i][0].toFixed(4)+"</td>"+
                            "<td>"+get_data[i][1].toFixed(4)+"</td>"+
                            "<td>"+get_data[i][5]+"</td>"+
                        "</tr>";
                }
            }
            for (var i in get_data){
                if (get_data[i][5] == "正常"){
                insert += "<tr>"+
                            "<td>"+get_data[i][2]+"</td>"+
                            "<td>"+get_data[i][4]+"</td>"+
                            "<td>"+get_data[i][0].toFixed(4)+"</td>"+
                            "<td>"+get_data[i][1].toFixed(4)+"</td>"+
                            "<td>"+get_data[i][5]+"</td>"+
                        "</tr>";
                }
            }
            parent.innerHTML = insert;
        }
        var data_getting = {
            url: "/vehicle_get",
            dataType: "json",
            success: function(result){
                var data = result.data;
                map_update(data);
    //            list_update(data);
            var table = $('#truck_table').DataTable();
            table.ajax.reload( null, false);
            }
        }
        $.ajax(data_getting);
        window.setInterval(function(){$.ajax(data_getting)},5000);

    </script>
    <script>
        jQuery(document).ready(function($) {
            $("#trucks").addClass("active");
            $("#real_time_location").addClass("active");
            $("#trucks_toggle").trigger("click");
            $('#truck_table').DataTable( {
                "ajax": {
                    "url":"/vehicle_get",
                    "dataSrc":function(json){
                        var meta_data = json.data;
                        var data = [];
                        for (var i in meta_data){
                            data.push([meta_data[i][2],
                                       meta_data[i][4],
                                       meta_data[i][0].toFixed(4),
                                       meta_data[i][1].toFixed(4),
                                       meta_data[i][5]]);
                        }
                        return data
                    }
            },
//            "columns":[
//            {data: "car_id"},
 //           {data: "task"},
   //         {data: "long"},
     //       {data: "lat"},
       //     {data: "status"}
         //       ],
            aLengthMenu: [
                    [5, 7, 9, 10, -1], [5, 7, 9, 10, "全部"]
                ],
                language:{
                    "info": "显示_START_至_END_项结果，共_TOTAL_项",
                    "search": "搜索:",
                    "paginate": {"previous": "<", "next": ">"},
                    "lengthMenu": "显示 _MENU_ 项",
                    "zeroRecords": "抱歉，没有找到符合条件的记录",
                    "infoFiltered": "(筛选自 _MAX_ 条总记录)",
                },
            } );

        } );
        //TODO 处理滚动条的问题
    </script>
{% endblock %}
